<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.title" placeholder="请输入胸围" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.status" placeholder="状态" style="width: 120px" size="small">
                        <el-option value="1" label="启用"></el-option>
                        <el-option value="0" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" @click="openAddBtn" size="small" :loading="btnLoading"
                               :disabled="nodeActions.indexOf('add')<0">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading">
                <el-table-column type="index" label="序号" width="90"></el-table-column>
                <el-table-column label="胸围" align="center" prop="s_title"></el-table-column>
                <el-table-column prop="status" label="当前状态" width="120">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=1 :inactive-value=0
                                   @change="changStatus(scope.$index, scope.row.status)"  :disabled="nodeActions.indexOf('edit')<0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openEditBtn(scope.row)" :disabled="nodeActions.indexOf('edit')<0">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--编辑-->
        <Modal v-model="editVisible" title="修改胸围" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="90px">
                <el-form-item label="胸围">
                    <el-input v-model.trim="editForm.s_title" size="small" placeholder="请输入胸围" style="width: 80%;" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button type="primary" :loading="saveLoading" @click="saveBtn">保 存</i-button>
            </div>
        </Modal>

        <!--新增-->
        <Modal v-model="addVisible" title="新增胸围" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="90px">
                <el-form-item label="胸围">
                    <el-input v-model.trim="addForm.s_title" size="small" placeholder="请输入胸围" style="width: 80%;" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button type="primary" :loading="saveLoading" @click="addBtn">保 存</i-button>
            </div>
        </Modal>
    </section>
</template>

<script>
import {sizeList, sizeSet, sizeAdd} from "@/api/bs/size";

export default {
    name: "sizeList",
    props:{
        nodeActions: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            isLoad: false,//子组件是否已加载过
            tableHeight: window.innerHeight-284,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],

            form: {
                title: "",
                status: "1",
                type: 9,
            },

            //编辑
            saveLoading: false,
            editVisible: false,
            editForm: {id: "", s_title: ''},

            //新增
            addVisible: false,
            addForm: {type: 9, s_title: ''}
        }
    },
    methods:{
        //搜索按钮
        searchBtn(){
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page){
            this.page = page;
            this.getData();
        },
        //获取数据
        getData(){
            let param = {
                page: this.page,
                limit: this.limit,
                type: this.form.type,
                status: this.form.status
            };
            if(this.form.title){
                param.title = this.form.title;
            }
            this.loading = true;
            sizeList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(()=>{
                this.loading = false;
            });
        },

        //修改状态
        changStatus(index, value){
            let msg = value ? "启用" : "禁用"
            this.$confirm("是否"+msg+"，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                sizeSet(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },

        //编辑
        openEditBtn(row){
            this.editVisible = true;
            this.$set(this.editForm, 's_title', row.s_title);
            this.$set(this.editForm, 'id', row.id);
            console.log(this.editForm)
        },
        //编辑保存
        saveBtn(){
            this.saveLoading = true;
            sizeSet(this.editForm).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.editVisible = false;
                    this.$message.success("修改成功");
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            });
        },
        //新增
        openAddBtn(){
            this.addVisible = true;
            this.addForm = {type: 9, s_title: ''};
        },
        //新增保存
        addBtn(){
            this.saveLoading = true;
            sizeAdd(this.addForm).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.addVisible = false;
                    this.$message.success("新增成功");
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        }
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
